blue = #193549
yellow  = #FFE200

@import '_normalize'

h1,h2,h3,h4,h5, h6
  font-family oswald, sans-serif
  font-weight normal
  margin 0

html
  font-size 10px

h1
  font-size 5rem

p
  font-size 1.8rem
  a
    color blue
    border-bottom 1px solid lighten(yellow, 70%)
    background lighten(yellow, 90%)
    text-decoration none
    transition all 0.2s
    &:hover
      background lighten(yellow, 70%)

img
  max-width 100%
h1
  text-transform uppercase
  letter-spacing 2px
  display inline-block
  text-shadow 2px 2px 0 darken(blue, 20%), 0 0 10rem rgba(255, 255, 255, 0.4)
  border-bottom 2px solid yellow
  padding-bottom 2rem
  margin-bottom 2rem
  // &:after
  //   content : ''
  //   display block
  //   height 0.5rem
  //   background yellow

  a
    color white
    text-decoration none
    padding 10px

video.term
  width 60rem
  box-shadow 0 0 10rem 4.5rem rgba(255, 255, 255, 0.06)
  border-radius 4px
  display block
  max-width 100%
  margin 0 auto -5rem auto

header.top
  background blue url("../images/bg.png") fixed
  // background blue
  border-top 1rem solid darken(blue, 20%)
  text-align center
  color white
  padding 2rem


.videos
  max-width 120rem
  margin 0 auto
  h2
    text-align center
    font-size 3rem

.half
  width 50%
  float left
  &:first-child
    padding-right 5rem
  &:last-child
    padding-right 5rem

.about
  padding 3rem 0
  overflow hidden
  p
    line-height 1.8
    margin-top 0

  img
    display block
    margin 0 auto
    width 100px
    float left
    margin-right 2rem
    border-radius 50%


h3
  text-align center
  font-size 2rem
  text-transform uppercase
  margin-bottom 2rem
ul.video-list
  list-style none
  clear both
  padding 0
  display flex
  flex-direction row
  flex-wrap wrap
  counter-reset video
  li
    background lighten(grey, 92%);
    border-radius 2px
    padding 1rem
    width 24%
    margin-right 1%
    margin-bottom 2rem
    position relative
    &:nth-child(4n+4)
      margin-right 0
    &:before
      // content counter(video, decimal-leading-zero)
      content attr(data-timecode)
      position absolute
      color white
      background black
      padding 2px 5px
      color yellow
      left 1rem
      font-size 0.8rem
    img
      float left
      width:40%
      margin-right 1rem
    p
      font-size 12px
      color lighten(black, 30%)
      clear both
      padding-top 1rem
      margin-bottom 0

.video-title
  font-size 1.5rem
  margin 0
  text-transform uppercase
  counter-increment video
  text-align left
  &:before
    counter(video, decimal-leading-zero)

.video
  p
    margin-top 0
    line-height 1.8


section.deets
  text-align center
  // border-bottom 1px solid blue
  background darken(white, 3%)
  // margin-bottom 4rem
  overflow hidden
  padding-top 5rem
  padding-bottom 1rem
  &.secondary
    padding-top 2rem
  p
    font-size 3rem
    max-width 80rem
    margin 0 auto
    line-height 1.5
    &.naw
      font-size 14px
      clear both
      padding-top 1rem


.signup
  max-width 60rem
  margin 2rem auto 1rem auto
  border 1px solid yellow
  overflow hidden
  input
    background white
    line-height 2
    padding 1rem
    font-size 2rem
    border 0
    outline 0
    float left
    &[type="email"]
      width 60%
    &[type="submit"]
      width 40%
      background yellow
      color alpha(black, 0.5)

section.social
  text-align center
  padding 2rem
  border-bottom 1px solid lighten(grey, 90%)
  margin-bottom 2rem
  .fb-like
    position relative
    top -3px
    margin-right: 4rem;
    margin-left: 3rem;
  #___plusone_0
    position relative
    top 1px
  #twitter-widget-0
    margin-left 3rem


p.desc.success
  font-size 1.5rem
  border-left 10px solid yellow
  color blue
  text-align left
  padding-left 1rem

.deets
  background yellow

.twitter-tweet
  display inline-block !important
  margin 4rem 1rem 0 !important
@media all and (max-width:1000px)
  ul.video-list
    padding 1rem
    li
      &:nth-child(1n)
        width 32.5%
        margin-right 1.25%
      &:nth-child(3n+3)
        margin-right 0

@media all and (max-width:850px)
  section, header
    padding 2rem
  h1
    font-size 5.2vw
  section.deets
    p.desc
      font-size 2rem
  .signup
    input
      font-size 1.3rem
      padding 0.5rem

@media all and (max-width:760px)
  ul.video-list
    li
      &:nth-child(1n)
        width 49%
        margin-right 2%
      &:nth-child(2n+2)
        margin-right 0
  .half
  .half:nth-child(1n)
    width 100%
    padding 0

@media all and (max-width:480px)
  ul.video-list
    padding 0
    li
      &:nth-child(1n)
        width 100%
        margin-right 0
      p
        clear none

@media all and (max-width:420px)
  .signup
    input[type]
      width 100%
      text-align center

